<template>
  <div class="ccgd" v-if="data!=''">
    <div class="swiperMulti jz" style="height: 170px;min-width: 1200px;width: 1200px;overflow: hidden!important;" @mouseenter="mouseenter" @mouseleave="mouseleave">
      <!--    <button @click.stop="toRight" class="el-toRight">+</button>-->
      <!--    <button @click.stop="toLeft" class="el-toLeft">-</button>-->
      <ul class="ul ull wz_jz bhh" style="overflow-y:hidden">
        <li
            class="img_100"
            v-for="(item, index) in data"
            :key="item.id"
            :style="`left:${(index - 1) * itemPositionInterval}px`"
            :ref="'item' + index"
            :data-position-left="(index - 1) * itemPositionInterval"
        >
          <div class="wh_9 jz">
            <div>
              <img :src="item.imgUrl" style="width: 226px;height: 140px" alt="">
            </div>
            <div>{{ item.id }}</div>
          </div>

          <!--        {{ item.id }}-->
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
let timer;
export default {
  data() {
    return {
      active: 1,
      itemPositionInterval: 238, // 定位间隔
      data: [
        {
          id: 1,
          imgUrl:require('../../assets/img/lb1.jpg')
        },
        {
          id: 2,
          imgUrl:require('../../assets/img/lb2.png')
        },
        {
          id: 3,
          imgUrl:require('../../assets/img/lb3.jpg')
        },
        {
          id: 4,
          imgUrl:require('../../assets/img/lb4.jpg')
        },
        {
          id: 5,
          imgUrl:require('../../assets/img/lb5.jpg')
        },
        {
          id: 6,
          imgUrl:require('../../assets/img/lb6.jpg')
        },
        {
          id: 7,
          imgUrl:require('../../assets/img/lb7.jpg')
        },
        {
          id: 8,
          imgUrl:require('../../assets/img/lb8.jpg')
        },
        {
          id: 9,
          imgUrl:require('../../assets/img/lb9.jpg')
        },
        {
          id: 10,
          imgUrl:require('../../assets/img/lb10.jpg')
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.setInterval()
  },
  destroyed() {
    clearInterval(timer);
  },
  methods: {
    toRight() {
      let firstItemPositionLift = this.$refs.item0[0].getAttribute(
          "data-position-left"
      );
      if (Number(firstItemPositionLift) <= -this.itemPositionInterval) {
        this.data.push(this.data.shift());
      }
    },
    toLeft() {
      let firstItemPositionLift = this.$refs.item0[0].getAttribute(
          "data-position-left"
      );
      if (Number(firstItemPositionLift) >= -this.itemPositionInterval) {
        this.data.unshift(this.data.pop());
      }
    },
    setInterval() {
      timer = setInterval(() => {
        this.toRight();
      }, 2000);
    },
    mouseenter(e) {
      console.log("mouseenter");
      clearInterval(timer);
    },
    mouseleave() {
      console.log("mouseleave");
      this.setInterval()
    },
  },
};
</script>

<style scoped>
.swiperMulti {
  box-sizing: border-box;
  /*width: 100%;*/
  /*height: 100%;*/
  position: relative;
}
/*.swiperMulti el-toRight {*/
/*    position: absolute;*/
/*    z-index: 1;*/
/*    left: 0;*/
/*    top: 50%;*/
/*  }*/
/*.swiperMulti el-toLeft {*/
/*    position: absolute;*/
/*    z-index: 1;*/
/*    right: 0;*/
/*    top: 50%;*/
/*  }*/
.ull {
  width: 1200px;
  text-align: center;
}
.ull li {
  /*border: 1px solid rgb(60, 206, 16);*/
  /*width: 210px;*/
  /*height: 140px;*/
  position: absolute;
  transition: all 0.5s ease;
  font-size: 20px;
}
</style>